<template>
	<view>
		<view style="margin-left: 32rpx; margin-top: 36rpx; font-size: 32rpx; font-weight: 500; color: #000">选择要加入的店铺</view>
		<view class="flex align-center" style="margin: 36rpx 32rpx 8rpx 32rpx; background: #f3f3f3; border-radius: 8rpx 8rpx 8rpx 8rpx; padding: 14rpx 24rpx">
			<view style="font-size: 0; margin-right: 14rpx">
				<image style="width: 40rpx; height: 40rpx" src="static/5.png"></image>
			</view>
			<input class="flex-1" @input="search" v-model="keyword" type="text" placeholder="输入店铺名称" />
		</view>
		<view style="padding: 32rpx 32rpx 0 0" @click="select(item, index)" v-for="(item, index) in list" :key="index">
			<view class="flex align-center">
				<view style="font-size: 0; margin: 0 32rpx; margin-bottom: 20rpx" v-if="!item.is_join">
					<view v-if="item.isSelect == 0" style="width: 36rpx; height: 36rpx; border: 2rpx solid #999; border-radius: 50%"></view>
					<image v-else style="width: 40rpx; height: 40rpx" src="static/6.png"></image>
				</view>
				<view v-else class="disabledRadio"></view>
				<view class="flex-1 flex align-center" style="border-bottom: 2rpx solid #efefef; padding-bottom: 20rpx">
					<view style="font-size: 0; margin-right: 20rpx">
						<image style="width: 64rpx; height: 64rpx" :src="item.avatar_url"></image>
					</view>
					<view style="font-size: 30rpx; font-weight: 500; color: #333">
						{{ item.shopname }}
					</view>
				</view>
			</view>
		</view>
		<!-- 占位置 -->
		<view style="height: 148rpx"></view>
		<!-- 提交按钮 -->
		<view class="flex justify-center" style="position: fixed; width: 750rpx; background: #fff; bottom: 0; height: 128rpx">
			<view @click="submit" class="flex align-center justify-center submit">提交</view>
			<view style="height: 48rpx"></view>
		</view>
		<!-- 提交申请弹窗 -->
		<uni-popup ref="popup" type="center">
			<view class="dialog-container">
				<view class="title">
					<uni-icons class="icon" type="info-filled" size="24" color="#FF3F4A"></uni-icons>
					<text>提示</text>
				</view>
				<view class="content">{{ popupContent }}</view>
				<view class="btn-group">
					<view class="btn confirm" @click="confirm">我知道了</view>
				</view>
			</view>
		</uni-popup>
		<!-- 我的团队添加店铺会员 -->
		<!-- <uni-popup ref="popups" type="center">
			<view class="dialog-container">
				<view class="title">
					<uni-icons class="icon" type="info-filled" size="24" color="#FF3F4A"></uni-icons>
					<text>提示</text>
				</view>
				<view class="content">"{{popupContent}}"</view>
				<view class="btn-group">
					<view class="btn confirm" @click="confirm">我知道了</view>
				</view>
			</view>
		</uni-popup> -->
	</view>
</template>

<script>
export default {
	data() {
		return {
			list: [],
			keyword: '',
			type: 0, //0全部1我管理的
			page: 1,
			pageId: '',
			lastPage: 0,
			selectId: 0,
			shopname: '',
			userId: '',
			username: '',
			popupContent: ''
		};
	},
	onLoad(options) {
		uni.setNavigationBarTitle({
			title: '成为店铺合伙人'
		});
		if (options.userId) {
			this.pageId = options.pageId;
			this.userId = options.userId;
			this.username = options?.username;
			this.type = 3;
		} else {
			this.userId = uni.getStorageSync('userInfo').id;
		}
		this.getList();
	},
	methods: {
		search() {
			if (this.type == 0 && this.keyword == '') {
				this.list = [];
				return;
			}
			this.getList();
		},
		//提交
		submit() {
			if (this.selectId == 0) {
				uni.showToast({
					title: '请选择要加入的店铺',
					icon: 'none'
				});
				return;
			}
			this.$request({
				url: 'Partners/shop_partner_padd',
				method: 'POST',
				data: {
					shop_id: this.selectId,
					user_id: this.userId
				}
			}).then((res) => {
				if (res.data.code == 1) {
					if (this.username?.length) {
						this.popupContent = `请及时联系${this.username}，打开本小程序，在会员界面“我的团队”中打开“店铺合伙人”页面，同意您的邀请！对方同意后，将提交商家管理员审核，审核通过后，将成为${this.shopname}的店铺合伙人。`;
					} else {
						this.popupContent = `您的申请已经提交商家管理员审核，审核通过后，将成为${this.shopname}的店铺合伙人。`;
					}
				} else {
					this.popupContent = res.data.msg;
				}
				this.$refs.popup.open();
			});
		},
		// 我知道了
		confirm() {
			this.$refs.popup.close();
			if(this.pageId == 'myTame'){
				uni.redirectTo({
					url: `/pages/schedule/invitationRecord`
				});
			}else{
				uni.redirectTo({
					url: `/pages/news/sanqi/hehuoren?index=3`
				});
			}
		},
		//选择人员
		select(item, index) {
			if (item.isSelect == 0) {
				for (let i = 0; i < this.list.length; i++) {
					this.list[i].isSelect = 0;
				}
				this.list[index].isSelect = 1;
				this.selectId = item.id;
				this.shopname = item.shopname;
			} else {
				this.list[index].isSelect = 0;
				this.selectId = 0;
			}
		},
		// 获取店铺列表
		getList() {
			this.$request({
				url: 'wedding/shop_list',
				method: 'POST',
				data: {
					keyword: this.keyword,
					type: this.type,
					user_id: this.userId
				}
			}).then((res) => {
				for (let i = 0; i < res.data.data.length; i++) {
					res.data.data[i].isSelect = 0;
				}
				this.list = res.data.data;
			});
		}
	}
};
</script>

<style scoped lang="scss">
.flex {
	display: flex;
}

.flex-1 {
	flex: 1;
}

.flex-clum {
	flex-direction: column;
}

.align-center {
	align-items: center;
}

.justify-center {
	justify-content: center;
}

.justify-between {
	justify-content: space-between;
}
.submit {
	width: 686rpx;
	height: 80rpx;
	background: linear-gradient(154deg, #e4b77f 0%, #cd9c61 100%);
	border-radius: 40rpx;
	font-size: 24rpx;
	font-weight: 500;
	color: #fff;
}

.disabledRadio {
	width: 40rpx;
	height: 40rpx;
	margin: 0 32rpx 20rpx;
	border: 2rpx solid #999;
	border-radius: 100%;
	box-sizing: border-box;
	background-color: #eee;
}

.dialog-container {
	width: 600rpx;
	padding: 32rpx;
	background: #fff;
	border-radius: 32rpx;
	box-sizing: border-box;
	.title {
		display: flex;
		justify-content: center;
		align-items: center;
		padding-top: 12rpx;
		font-size: 36rpx;
		font-weight: bold;
		line-height: 50rpx;
		color: #ff3f4a;
		.icon {
			margin-right: 8rpx;
			transform: rotate(180deg);
		}
		/deep/.uni-icons {
			vertical-align: middle;
		}
	}
	.content {
		padding: 32rpx 0;
		font-size: 30rpx;
		color: #666;
		line-height: 42rpx;
		text-indent: 2em;
	}
	.btn-group {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-top: 32rpx;
		.btn:only-child {
			width: 100%;
		}
	}
	.btn {
		width: 260rpx;
		height: 88rpx;
		line-height: 88rpx;
		font-size: 30rpx;
		text-align: center;
		border-radius: 10rpx;
	}
	.confirm {
		background: #ebbe87;
		color: #fff;
	}
	.cancel {
		background: #f3f3f3;
		color: #333;
	}
}
</style>
